<template>
  <div class="main-content">
    <div class="icon-container">
      <el-card class="intro-card">
        <template #header>
          <div class="card-header">
            <h2>图标使用指南</h2>
          </div>
        </template>
        <p>本系统集成了两套图标库，便于开发使用：</p>
        <ul>
          <li><strong>Element Plus 图标</strong>：官方图标库，使用简单，与UI库完美匹配</li>
          <li><strong>Heroicons 图标</strong>：丰富的开源图标库，提供多种风格图标</li>
        </ul>
        <p>点击任意图标可查看使用方法，快速复制代码片段。</p>
      </el-card>

      <el-tabs v-model="activeTab" type="border-card" class="icon-tabs">
        <el-tab-pane label="Element Plus 图标" name="element">
          <div class="tab-header">
            <h3>Element Plus 图标库</h3>
            <p>官方图标集合，导入使用更加简便</p>
          </div>
          <div class="icon-grid">
            <div v-for="(icon, name) in elementIcons" :key="name" class="icon-item"
                 @click="copyElementIconName(name, icon)">
              <div class="icon-display">
                <component :is="icon" class="icon"/>
              </div>
              <div class="icon-name">{{ name }}</div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="Heroicons 实心图标" name="solid">
          <div class="tab-header">
            <h3>Heroicons 实心图标</h3>
            <p>24x24 像素的实心风格图标</p>
          </div>
          <div class="icon-grid">
            <div v-for="(icon, name) in solidIcons" :key="name" class="icon-item"
                 @click="copyHeroIconName(name, 'solid')">
              <div class="icon-display">
                <component :is="icon" class="icon"/>
              </div>
              <div class="icon-name">{{ name }}</div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="Heroicons 轮廓图标" name="outline">
          <div class="tab-header">
            <h3>Heroicons 轮廓图标</h3>
            <p>24x24 像素的轮廓风格图标</p>
          </div>
          <div class="icon-grid">
            <div v-for="(icon, name) in outlineIcons" :key="name" class="icon-item"
                 @click="copyHeroIconName(name, 'outline')">
              <div class="icon-display">
                <component :is="icon" class="icon"/>
              </div>
              <div class="icon-name">{{ name }}</div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="Heroicons 迷你图标" name="mini">
          <div class="tab-header">
            <h3>Heroicons 迷你图标</h3>
            <p>20x20 像素的实心风格图标</p>
          </div>
          <div class="icon-grid">
            <div v-for="(icon, name) in miniIcons" :key="name" class="icon-item"
                 @click="copyHeroIconName(name, 'mini')">
              <div class="icon-display">
                <component :is="icon" class="icon"/>
              </div>
              <div class="icon-name">{{ name }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-dialog v-model="dialogVisible" title="图标使用方法" width="600px">
        <div class="dialog-content">
          <p><strong>图标名称:</strong> {{ selectedIcon }}</p>

          <el-divider content-position="left">引入方式</el-divider>
          <el-input readonly :value="importCode" class="code-block">
            <template #append>
              <el-button @click="copyCode(importCode)">复制</el-button>
            </template>
          </el-input>

          <el-divider content-position="left">使用方式</el-divider>
          <el-input readonly :value="usageCode" class="code-block">
            <template #append>
              <el-button @click="copyCode(usageCode)">复制</el-button>
            </template>
          </el-input>
        </div>
      </el-dialog>

      <el-backtop :right="40" :bottom="40"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import * as solidIcons from '@heroicons/vue/24/solid'
import * as outlineIcons from '@heroicons/vue/24/outline'
import * as miniIcons from '@heroicons/vue/20/solid'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const activeTab = ref('element')
const dialogVisible = ref(false)
const selectedIcon = ref('')
const iconType = ref('')
const selectedIconComponent = ref<any>(null)

// Element Plus 图标
const elementIcons = ref<Record<string, any>>({})

onMounted(() => {
  // 初始化 Element Plus 图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    elementIcons.value[key] = component
  }
})

// 复制 Element Plus 图标名称
const copyElementIconName = (name: string, icon: any) => {
  selectedIcon.value = name
  iconType.value = 'element'
  selectedIconComponent.value = icon
  dialogVisible.value = true
}

// 复制 Heroicons 图标名称
const copyHeroIconName = (name: string, type: string) => {
  selectedIcon.value = name
  iconType.value = type
  dialogVisible.value = true
}

// 生成导入代码
const importCode = computed(() => {
  if (iconType.value === 'element') {
    return `import { ${selectedIcon.value} } from '@element-plus/icons-vue'`
  }

  const importMap = {
    'solid': '@heroicons/vue/24/solid',
    'outline': '@heroicons/vue/24/outline',
    'mini': '@heroicons/vue/20/solid'
  }
  return `import { ${selectedIcon.value} } from '${importMap[iconType.value as keyof typeof importMap]}'`
})

// 生成使用代码
const usageCode = computed(() => {
  if (iconType.value === 'element') {
    return `<el-icon><${selectedIcon.value} /></el-icon>`
  }
  return `<${selectedIcon.value} class="w-6 h-6" />`
})

// 复制代码
const copyCode = (code: string) => {
  navigator.clipboard.writeText(code).then(() => {
    ElMessage.success('复制成功')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}
</script>

<style scoped lang="scss">

.icon-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-card {

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  ul {
    padding-left: 20px;
    margin: 10px 0;

    li {
      margin-bottom: 8px;
    }
  }
}

.icon-tabs {
  width: 100%;
}

.tab-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-light);

  h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
  }

  p {
    margin: 0;
    color: var(--el-text-color-secondary);
  }
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
}

.icon-item:hover {
  background-color: var(--el-color-primary-light-9);
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--el-color-primary-light-7);
}

.icon-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  margin-bottom: 8px;
  color: var(--el-color-primary);

  .icon {
    width: 24px;
    height: 24px;
  }
}

.icon-name {
  font-size: 12px;
  text-align: center;
  word-break: break-all;
  color: var(--el-text-color-regular);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-content {
  padding: 0 10px;
}

.code-block {
  margin: 10px 0;
  font-family: monospace;
}

:deep(.el-tabs__content) {
  padding: 20px;
}
</style> 